<form [formGroup]="descriptionForm">

  <mat-form-field class="half-width">
    <input matInput placeholder="{{ 'okr-topic-description-form.header' | translate }}" formControlName="name">
  </mat-form-field>

  <mat-form-field class="half-width">
    <input [matDatepicker]="startDatePicker" readonly [min]="minBeginn" matInput placeholder="{{ 'okr-topic-description-form.beginning' | translate }}" formControlName="beginning">
    <mat-datepicker-toggle [for]="startDatePicker" matSuffix></mat-datepicker-toggle>
    <mat-datepicker #startDatePicker></mat-datepicker>
    <mat-error>
      <app-form-error [control]="descriptionForm.get('beginning')"></app-form-error>
    </mat-error>
  </mat-form-field>

  <mat-form-field class="form-whole-line">
      <textarea type="text" matInput placeholder="{{ 'okr-topic-description-form.description' | translate }}" formControlName="description">
      </textarea>
  </mat-form-field>

  <mat-form-field class="form-whole-line">
      <textarea type="text" matInput placeholder="{{ 'okr-topic-description-form.contributes-to' | translate }}" formControlName="contributesTo">
      </textarea>
  </mat-form-field>

  <mat-form-field class="form-whole-line">
      <textarea type="text" matInput placeholder="{{ 'okr-topic-description-form.delimitation' | translate }}" formControlName="delimitation">
      </textarea>
  </mat-form-field>

  <mat-form-field class="form-whole-line">
      <textarea type="text" matInput placeholder="{{ 'okr-topic-description-form.dependencies' | translate }}" formControlName="dependencies">
      </textarea>
  </mat-form-field>

  <mat-form-field class="form-whole-line">
      <textarea type="text" matInput placeholder="{{ 'okr-topic-description-form.resources' | translate }}" formControlName="resources">
      </textarea>
  </mat-form-field>

  <mat-form-field class="form-whole-line">
      <textarea type="text" matInput placeholder="{{ 'okr-topic-description-form.handover-plan' | translate }}" formControlName="handoverPlan">
      </textarea>
  </mat-form-field>

  <app-user-selector [resultControl]="descriptionForm.get(['initiatorId'])" [users$]="users$" placeholderText="{{'okr-topic-description-form.initiator' | translate}}" noUser="{{'okr-topic-description-form.no-initiator' | translate}}"></app-user-selector>

  <app-user-selector-multi [users$]="users$" [resultControl]="descriptionForm.get(['startTeam'])" placeholderText="{{'okr-topic-description-form.start-team' | translate}}"></app-user-selector-multi>

  <app-user-selector-multi [users$]="users$" [resultControl]="descriptionForm.get(['stakeholders'])" placeholderText="{{'okr-topic-description-form.stakeholder' | translate}}"></app-user-selector-multi>

</form>
